<template>
    <div>
        <div> watch </div>
        <div ref="elRef">ref</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch, watchEffect, watchPostEffect, watchSyncEffect } from 'vue'

export default defineComponent({
    setup() {
        // watch参数: target, cb, options
        // const count = ref(0)
        // const msg = ref('Hello')
        // const state = reactive({ name: '张三' })
        // watch([count, msg, () => state.name], (val, prevVal) => {
        //     console.log(val, prevVal);
        // }, {
        //     immediate: true,
        //     deep: true
        // })

        // watchEffect 自动收集函数依赖，并在依赖更新时触发
        // 参数：cb, options
        // const divRef = ref(null)
        // const nameRef = ref('张三')
        // watchEffect(() => {
        //     console.log(divRef.value, nameRef.value);
        // }, {
        //     flush: 'pre' // 默认
        //     // flush: 'post',
        //     // flush: 'sync',
        // })
        // setTimeout(() => {
        //     nameRef.value = '李四'
        // }, 1000);

        // // watchPostEffect flush: 'post'的语法糖
        // const elRef = ref(null)
        // watchPostEffect(() => {
        //     console.log(elRef);
        // })
        // // watchPostEffect flush: 'sync'的语法糖
        // watchSyncEffect(() => {
        //     console.log(elRef);
        // })
        return {
            // divRef,
            // elRef
        }
    },
    // data() {
    //     return {
    //         count: 0,
    //         msg: 'Hello'
    //     }
    // },
    // watch: {
    //     count: {
    //         handler: (val, preVal) => {
    //             console.log(val, preVal);
    //         },
    //         immediate: true,
    //         deep: true
    //     }
    // }
})
</script>
